<template>
  <div class="share">
    <div class="header">
      <div class="header-content">
        <div class="logo">
          <span class="iconfont icon-pan"></span>
          <span class="name" @click="jump">皓明云盘</span>
        </div>
      </div>
    </div>
    <div class="share-body">
      <template v-if="Object.keys(shareInfo).length == 0">
        <div
          class="loading"
          v-loading="Object.keys(shareInfo).length == 0"
        ></div>
      </template>
      <template v-else>
        <div class="share-panel">
          <div class="share-user-info">
            <div class="avatar">
              <Avatar :userId="shareInfo.userId" :width="50"> </Avatar>
            </div>
            <div class="share-info">
              <div class="user-info">
                <span class="nick-name">{{ shareInfo.nickName }}</span>
                <span class="share-time"
                  >分享于：{{ shareInfo.shareTime }}</span
                >
              </div>
              <div class="file-name">分享文件：{{ shareInfo.fileName }}</div>
            </div>
          </div>
          <div class="share-op-btn">
            <el-button
              type="primary"
              @click="cancelShare"
              v-if="shareInfo.currentUser"
            >
              <span class="iconfont icon-cancel"></span>
              取消分享</el-button
            >
            <el-button
              v-else
              type="primary"
              @click="save2MyPan"
              :disabled="selectFileIdList.length == 0"
            >
              <span class="iconfont icon-import"></span>
              保存到我的网盘</el-button
            >
          </div>
        </div>
        <Navigation
          ref="navigationRef"
          @navChange="navChange"
          :shareId="shareId"
          :caseType="2"
        ></Navigation>
        <div class="file-list">
          <Table
            ref="dataTableRef"
            :columns="columns"
            :dataSource="tableData"
            :fetch="loadDataList"
            :initFetch="false"
            :options="tableOptions"
            :showPageSize="false"
            @rowSelected="rowSelected"
          >
            <template #fileName="{ row }">
              <div
                class="file-item"
              >
                <template
                  v-if="
                    (row.fileType == 3 || row.fileType == 1) && row.status == 2
                  "
                >
                  <Icon :cover="row.fileCover" :width="32"></Icon>
                </template>
                <template v-else>
                  <Icon
                    v-if="row.folderType == 0"
                    :fileType="row.fileType"
                  ></Icon>
                  <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
                </template>
                <span class="file-name" :title="row.fileName">
                  <span @click="preview(row)">{{ row.fileName }}</span>
                </span>
                <span class="op">
                  <span
                    class="iconfont icon-download"
                    v-if="row.folderType == 0"
                    @click="download(row)"
                    >下载</span
                  >
                  <!-- <span
                    class="iconfont icon-import"
                    @click="save2MyPanSingle(row)"
                    v-if="row.showOp && !shareInfo.currentUser"
                    :disabled="selectFileIdList.length == 0"
                    >保存到我的网盘</span
                  >-->
                </span> 
              </div>
            </template>
            <template #fileSize="{ row }">
              <span v-if="row.fileSize">
                {{ proxy.sizeToStr.size2Str(row.fileSize) }}
              </span>
            </template>
          </Table>
        </div>
      </template>
      <!-- 目录选择 -->
      <FolderSelect
        ref="folderSelectRef"
        @folderSelect="save2MyPanDone"
      ></FolderSelect>
      <!-- 预览 -->
      <Preview ref="previewRef"></Preview>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  GetShareLoginInfo,
  LoadFileList,
  CreateDownloadUrlShare,
  DownloadShare,
  CancelShare,
  SaveShare,
} from "@/api/showShare";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const shareId = route.params.shareId;
const shareInfo = ref({});
const getShareInfo = async () => {
  let params = {
    shareId: shareId,
  };
  let result = await GetShareLoginInfo(params, false);
  if (!result) {
    setTimeout(()=>{
      router.push("/");
    },2000);
    return;
  }
  if (result.data == null) {
    router.push(`/shareCheck/${shareId}`);
    return;
  }
  shareInfo.value = result.data;
};
const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
  },
  {
    label: "修改时间",
    prop: "lastUpdateTime",
    width: 200,
  },
  {
    label: "大小",
    prop: "fileSize",
    scopedSlots: "fileSize",
    width: 200,
  },
];
const tableData = ref({});
const tableOptions = {
  extHeight: 80,
  selectType: "checkbox",
};

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    shareId: shareId,
    filePid: currentFolder.value.fileId,
  };
  let result = await LoadFileList(params);
  if (!result) {
    return;
  }
  tableData.value = result.data;
};

// 显示操作按钮
// const showOp = (row) => {
//   tableData.value.list.forEach((element) => {
//     element.showOp = false;
//   });
//   row.showOp = true;
// };
// // 取消操作按钮
// const cancelShowOp = (row) => {
//   row.showOp = false;
// };
const currentFolder = ref({
  fileId: 0,
});
const navChange = (data) => {
  const { curFolder } = data;
  currentFolder.value = curFolder;
  loadDataList();
};
// 预览查看
const previewRef = ref();
const navigationRef = ref();
const preview = (data) => {
  if (data.folderType == 1) {
    navigationRef.value.openFolder(data);
    return;
  }
  data.shareId = shareId;
  previewRef.value.showPreview(data, 2);
};

// 下载文件
const download = async (row) => {
  let params = {
    shareId: shareId,
    fileId: row.fileId,
  };
  let result = await CreateDownloadUrlShare(params);

  if (!result) {
    return;
  }
  window.location.href = DownloadShare(result.data);
};
// // 单个保存到我的网盘
// const save2MyPanSingle = (row)  =>  {
//   if (!proxy.VueCookies.get("userInfo")) {
//     proxy.Message.warning(`您还没有登录噢~`)
//     router.push(`/login?redirectUrl=${route.path}`);
//     return;
//   }
//   save2MyPanFileIdArray.value = [row.fileId];
//   folderSelectRef.value.showFolderDialog();
// }
const folderSelectRef = ref();
const save2MyPanFileIdArray = [];
const save2MypanFilesizes = [];
// 多选
const selectFileIdList = ref([]);
const selectFileSizeList = ref([]);
const rowSelected = (rows) => {
  selectFileIdList.value = [];
  selectFileSizeList.value = [];
  
  rows.forEach((item) => {
    selectFileIdList.value.push(item.fileId);
    // TODO:保存文件夹怎么办？
    // selectFileSizeList.value.push(item.file)
  });
};
// 批量保存到我的网盘
const save2MyPan = () => {
  if (selectFileIdList.value.length == 0) {
    return;
  }
  if (!proxy.VueCookies.get("userInfo")) {
    proxy.Message.warning(`您还没有登录噢~`)
    router.push(`/login?redirectUrl=${route.path}`);
    return;
  }
  save2MyPanFileIdArray.value = selectFileIdList.value;
  save2MypanFilesizes.value = 
  folderSelectRef.value.showFolderDialog();
  // 回调
};
const save2MyPanDone =async (folderId)=>{
  let params = {
    shareId:shareId,
    shareFileIds:save2MyPanFileIdArray.value.join(','),
    myFolderId:folderId,
  }
  let result = await SaveShare(params)
  if(!result){
    return;
  }
  loadDataList();
  proxy.Message.success(`保存成功~`);
  folderSelectRef.value.close();
}

// 取消分享
const cancelShare  = ()=>{
  proxy.Confirm(`你确定要取消分享吗？`,async ()=>{
    let params = {
      shareIds:shareId,
    }
    let result = await CancelShare(params)
    if(!result){
      return;
    }
    proxy.Message.success(`取消分享成功`)
    router.push("/");
  })
}

const jump = ()=>{
  router.push("/");
}
onMounted(() => {
  getShareInfo();
});
</script>

<style lang="scss" scoped>
@import "@/assets/fileList.scss";
.header {
  width: 100%;
  position: fixed;
  background: var(--theme2);
  height: 50px;
  .header-content {
    width: 70%;
    margin: 0px auto;
    color: #fff;
    line-height: 50px;
    .logo {
      display: flex;
      align-items: center;

      .icon-pan {
        font-size: 40px;
        cursor: pointer;
      }
      .name {
        cursor: pointer;
        font-weight: bold;
        margin-left: 5px;
        font-size: 25px;
      }
    }
  }
}
.share-body {
  width: 70%;
  margin: 0px auto;
  padding-top: 50px;
  .loading {
    height: calc(100vh / 2);
    width: 100%;
  }
  .share-panel {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .share-user-info {
      flex: 1;
      display: flex;
      align-items: center;
      .avatar {
        margin-right: 5px;
      }
      .share-info {
        .user-info {
          display: flex;
          align-items: center;
          .nick-name {
            font-size: 15px;
          }
          .share-time {
            margin-left: 20px;
            font-size: 12px;
          }
        }
        .file-name {
          margin-top: 10px;
          font-size: 12px;
        }
      }
    }
  }
}
.file-list {
  margin-top: 10px;
  .file-item {
    .op {
      width: 170px;
    }
  }
}
</style>